// 用来获取设置路径用的
const path = require('path')

// 导入所需插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入配置 css 独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 导入 vue 的加载器
const VueLoader = require('vue-loader/lib/plugin')

console.log('我的当前路径为：', __dirname);
// webpack 的配置
module.exports = {
  // 'mode' option to 'development' or 'production'
  // 开发环境：（写代码的阶段）development
  // 生产环境：（代码已经写好了，已经部署到服务器了）production
  // 测试环境：（代码已经写好了，但是还没有部署，在本地测试的阶段）production
  mode: 'development',
  // 指明项目的入口文件
  // entry: './src/index.js',
  entry: {
    app: './src/index.js'
  },
  // 设置打包后的文件放在哪个目录中
  output: {
    // __dirname: 获取当前文件夹所在的目录路径用的
    path: path.resolve(__dirname, 'dist'),
    // [hash:8] 是获取一个随机 8 位字符的名称
    filename: 'js/[name]-[hash:8].js',
    // 清除之前打包的文件
    clean: true
  },
  // 配置插件
  plugins: [
    // 配置 vue 加载器
    new VueLoader(),
    // 将 ./public/index.html 文件渲染到打包目录中
    new HtmlWebpackPlugin({
      // html 模板
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      // css 文件单独打包后的文件位置
      filename: 'css/[hash:8].css'
    })
  ],
  module: {
    rules: [
      {
        // 匹配哪些文件需要使用加载器
        test: /\.css$/,
        // 配置被匹配到的文件使用说明加载器
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }, {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }, {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }, {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env', // js 的新语法
                '@babel/preset-react' // react 的语法
              ]
            }
          }
        ]
      }, {
        // 配置图片
        test: [/\.jpe?g$/, /\.png$/, /\.svg$/, /\.weeb$/, /\.weep$/],
        type: 'asset', // 通用的资源类型
        parser: {
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          },
        },
      }, {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // 配置项目中的别名
    alias: {
      // 配置别名， @ 表示的是 src 路径
      '@': path.resolve(__dirname, './src')
    },
    // 配置无需写后缀名
    extensions: ['.js', '.json', '.ts', '.jsx', '.tsx', '.css', '.vue'],
  },
  devServer: {
    port: 3000,
    // 配置跨域问题
    proxy: {
      '/api': {
        target: 'http://open.douyucdn.cn',
        changeOrigin: true
      }
    }
  }
}
